<template>
    <div class="kefuform">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Questions Form
            </div>
        </div>
        <!-- 表单 -->
        <van-form @submit="onSubmit">


            <van-field readonly clickable name="type" :value="value" label="type" placeholder="type"
                @click="showPicker = true" />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker confirm-button-text="confirm" cancel-button-text="cancel" show-toolbar :columns="colums"
                    @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>


            <!-- <van-field rows="2" type="textarea" maxlength="50" class="content" v-model="f.model.content" name="content"
                label="content" placeholder="content" :rules="[{ required: true, message: 'content' }]" />
 -->

            <van-field v-model="f.model.content" rows="2" autosize label="content" type="textarea"
                placeholder="Please enter feedback content" show-word-limit
                :rules="[{ required: true, message: 'content' }]" />


            <van-field name="upload picture" label="upload picture">
                <template #input>
                    <van-uploader v-model="uploade" :after-read="afterRead" />
                </template>
            </van-field>
            <!-- 按钮 -->
            <van-button class="kefuBtn" type="submit">Submit</van-button>
        </van-form>
    </div>
</template>
<script>
import { setfk, scFile, getfankuiList } from "../../api";
import { jiami, jiemi } from "../../utils/aeskey.js";
import { Toast } from "vant";
export default {
    data() {
        return {
            f: {
                model: {
                    typedId: 'WYMFA',
                    content: '',
                    images: [],
                    thirdOederId: ''
                }
            },
            uploade: [],
            //类型数组
            colums: [],
            typeList: [],
            showPicker: false,
            value: ''
        }
    },
    methods: {
        //提交反馈
        async onSubmit() {
            this.f.model.thirdOederId = this.$store.state.orderId
            console.log(this.f)
            const res = await setfk(jiami(this.f))
            console.log(jiemi(res.data), '提交反馈的结果')
            Toast('Response Success')
            this.$router.push('/kefu')
        },
        //图片上传完时
        async afterRead(file) {
            const res = await scFile(file)
            console.log(jiemi(res.data))
            const url = jiemi(res.data).model.ossUrl
            this.f.model.images.push(url)
        },
        //获取用户返回类型列表
        async getfkList() {
            const r = { id: '' }
            r.id = this.$store.state.orderId
            const res = await getfankuiList(jiami(r))
            console.log(jiemi(res.data), '反馈类型列表')
            this.typeList = jiemi(res.data).list
            this.colums = this.typeList.map(item => item.curName)
        },
        //当选择完类型时触发
        onConfirm(value) {
            //给选中的赋值id
            const index = this.typeList.filter(item => item.curName === value)
            this.f.model.typedIId = index[0].id
            this.value = value;
            this.showPicker = false;
        }
    },
    created() {
        this.getfkList()
    }
}
</script>

<style lang="less",scoped>
@a: 3.75vw;

.kefuform {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (60/@a);

    box-sizing: border-box;

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (110/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

    .content {
        height: (50/@a) !important;
    }

    .kefuBtn {
        width: (232/@a);
        height: (44/@a);
        background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
        border-radius: (10/@a);
        margin-top: (20/@a);
        margin-left: (70/@a);
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: (18/@a);
        color: #FFFFFF;
    }
}
</style>